<!DOCTYPE html>
<html>
<head>
    <title>Flask-SocketIO Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
</head>
<body>
    <h2>Chat Room</h2>
    <input id="msgInput" placeholder="Type message" autocomplete="off"/>
    <button onclick="sendMessage()">Send</button>
    <ul id="messages"></ul>

    <script>
        const socket = io();

        // 接收消息
        socket.on('message', function(msg){
            const li = document.createElement('li');
            li.textContent = msg;
            document.getElementById('messages').appendChild(li);
        });

        // 发送消息
        function sendMessage() {
            const input = document.getElementById('msgInput');
            socket.send(input.value);
            input.value = '';
        }
    </script>
</body>
</html>
